<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设备列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			.time-ul li{
				padding: 1rem .5rem;
			}
			.fl-r{
				float: right;
			}
			.font-weight{
				font-weight:900;
			}
			.time-ul li .mui-media-body{
				width: 90%;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设备列表</h1>
		</header>
		<div class="mui-content">
	    	<ul class="time-ul">
			    
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js" ></script>
		<script src="../js/md5.js"></script>
		<script src="../js/jquery.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			
			var key = 'udacs!@#';//固定的key值
			var mobile = localStorage.getItem('mobile');
//			var mobile = '13580524435';
			var timestamp = formatDateTime();//年月日时分秒
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密
			
			var state = {0:'默认',1:'维修中'};	
			getDeviceList();//获取带状态的设备列表
			function getDeviceList(){
				$.ajax(httpUrl+'devices_status',{
					data:JSON.stringify({
						"auth":{ 
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"mobile": mobile
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",					
					success:function(data){
						mui.each(data.resp, function(key,item) { 
							if(item.status == 0){
								$('.time-ul').append('<li data-id = "'+ item.device_id +'" data-status = "'+item.status+'" data-name = "'+item.device_name+'"><div class="mui-media-body"><p class="font-weight">'+ item.device_name +'</p><p>'+ item.house_name +'<span class="fl-r"></span></p></div><div class="mui-icon mui-icon-arrowright"></div></li>'); 

							}else{
								$('.time-ul').append('<li data-id = "'+ item.device_id +'" data-status = "'+item.status+'" data-name = "'+item.device_name+'"><div class="mui-media-body"><p class="font-weight">'+ item.device_name +'</p><p>'+ item.house_name +'<span class="fl-r" style="color:#FF0000">'+ state[item.status] +'</span></p></div><div class="mui-icon mui-icon-arrowright"></li>'); 
							}
						});
					},
					error:function(xhr,type,errorThrown){
						mui.toast('网络异常或者服务器出错：'+type,{duration:'2000',type:'div'});
					}
				})
			}
			
			mui(".time-ul").on('tap','li',function(){
				var deviceID = this.getAttribute('data-id');
				var status = this.getAttribute('data-status');
				var deviceName = this.getAttribute('data-name');
				if(status == 1){
					mui.toast('正在维修中，请勿重复提单',{duration:'2000',type:'div'});
				}else{
					var addDetail ={};
					addDetail.deviceID = deviceID;
					addDetail.deviceName = deviceName;
					localStorage.setItem('warning_add',JSON.stringify(addDetail));
					mui.openWindow({
					    url:'warningAdd.html',
					    id:'warningAdd.html'
					});
				}
			})			
		</script>
	</body>
</html>